<template>
  <div class="detail ace">
    <el-row class="title_pns">

      <el-collapse>
        <el-collapse-item>
          <template slot="title">
            <el-col :xl="22" :xs="20" class="mb">
              <el-button icon="iconfont icon-toggle" style="padding: 0;border:none;"></el-button>
            </el-col>
            <el-col :xl="2" :xs="4" >
              <div style="display: flex;
    justify-content: flex-end;">
              <el-button @click="back" size="mini" type="danger">返回</el-button>
              <el-button @click="dow()" size="mini" type="danger">下载专利</el-button>
              </div>
            </el-col>
          </template>
          <div class="collapse_item">
            <span v-for="(item, index) in collapseList" :key="item.name" @click="goItemUrl(item,index)"
              :class="collapseItem == item.name ? 'span_active' : ''">{{ item.name }}</span>
          </div>
        </el-collapse-item>
      </el-collapse>

      <el-col class="tio" v-if="desc">
        <span class="v_span">{{ desc.pns }}</span>
        <span class="v_span2">{{ desc.tio }}</span>
      </el-col>

    </el-row>
    <div v-if="collapseItem == '摘要'">
      <el-row class="infos" :gutter="10">
        <el-col>
          <div class="detail_info">
            <div class="detail_info_first_box">
              <el-descriptions :column="1" border style="width: 405px;">
                <el-descriptions-item label="法律状态/事件">
                  <div class="detail_info_last">
                    <el-tag style="border: none" size="small" effect="dark" color="#4ba22f" v-if="desc.status == '授权'">
                      {{
                          desc.status
                      }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#4ba22f"
                      v-if="desc.status == '部分无效'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#4ba22f"
                      v-if="desc.status == '权利恢复'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b"
                      v-if="desc.status == '未缴年费'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '撤回'">
                      {{
                          desc.status
                      }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="desc.status == '驳回'">
                      {{
                          desc.status
                      }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b"
                      v-if="desc.status == '期限届满'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b"
                      v-if="desc.status == '避重授权'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#6c778b"
                      v-if="desc.status == '全部撤销'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#da7b21"
                      v-if="desc.status == '实质审查'">
                      {{ desc.status }}
                    </el-tag>
                    <el-tag style="border: none" size="small" effect="dark" color="#da7b21" v-if="desc.status == '公开'">
                      {{
                          desc.status
                      }}
                    </el-tag>
                    <div v-if="desc.status == '暂无数据' || desc.status == ''">暂无数据</div>
                    <el-tag style="
                        height: 25px;
                        line-height: 25px;
                        margin-right: 5px;
                        margin-bottom: 5px;
                      " size="small" v-for="(  t, s) in desc.event  " :key="s" v-if="desc.event.length > 0"
                      effect="plain" type>{{ t }}
                    </el-tag>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="申请号">{{ desc.ano }}</el-descriptions-item>
                <el-descriptions-item label="申请日">{{ desc.ad }}</el-descriptions-item>
                <el-descriptions-item label="公开（公告）号">
                  <div>{{ desc.pns }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="公开（公告）日">{{ desc.pd }}</el-descriptions-item>
                <el-descriptions-item label="授权日">{{ desc.sq }}</el-descriptions-item>
                <el-descriptions-item label="预估到期日">{{ desc.rd }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="img-box">
              <div class="demo-image__preview">
                <el-image class="img" fit="contain" :src="desc.imgo"></el-image>
              </div>

              <br />
            </div>
          </div>
        </el-col>
        <el-col>
          <p class="context mb_zy" style="margin-bottom: 20px; font-weight: 700">{{ desc.is_loc == "0" ? "摘要" : "摘要说明"
          }}</p>
          <p v-html="desc.desc" style="line-height: 1.8" class="context"></p>
        </el-col>
      </el-row>
      <el-row class="mb_top top_line" :gutter="10">
        <el-col>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">当前申请(专利权)人</div>
            <div class="abst__layout-text context" v-html="desc.aspc"></div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">原始申请(专利权)人</div>
            <div class="abst__layout-text context" v-html="desc.aspo"></div>
          </div>
          <div class="abst__layout-row" v-if="desc.is_loc == '0'">
            <div class="abst__layout-label context mb_context">IPC分类号</div>
            <div class="abst__layout-text context">{{ desc.ipc }}</div>
          </div>
          <div class="abst__layout-row" v-if="desc.is_loc == '1'">
            <div class="abst__layout-label context mb_context">LOC分类号</div>
            <div class="abst__layout-text context">{{ desc.loc }}</div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">发明人</div>
            <div class="abst__layout-text context">{{ desc.ino }}</div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">代理机构</div>
            <div class="abst__layout-text context">{{ desc.agc }}</div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">代理人</div>
            <div class="abst__layout-text context">{{ desc.ag }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <power v-if="collapseItem == '权利说明'" :desc="desc"></power>
    <instructions v-if="collapseItem == '说明书'" :desc="desc"></instructions>
    <drawings v-if="collapseItem == '附图'" :desc="desc"></drawings>
    <fullText v-if="collapseItem == '全文'" :desc="desc"></fullText>
    <kindred v-if="collapseItem == '同族信息'" :desc="desc"></kindred>
    <law v-if="collapseItem == '法律信息'" :desc="desc" :pid="pid"></law>


    <!-- <div v-show="show" class="transition-box mb">
      <transition name="el-fade-in">
        <div v-show="show" class="el-zoom-in-top">
          <p @click="show = false" class="close">
            <i class="iconfont icon-guanbi"></i>
          </p>
          <ul class="mb_nav_li">
            <li @click="show = false">
              <router-link to="/detail">摘要</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/power">权利说明</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/instructions">说明书</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/drawings">附图</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/fullText">全文</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/kindred">同族信息</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/law">法律信息</router-link>
            </li>
          </ul>
        </div>
      </transition>
    </div> -->
  </div>
</template>

<script>
import power from './power.vue'
import instructions from './instructions.vue'
import drawings from './drawings.vue'
import fullText from './fullText.vue'
import kindred from './kindred.vue'
import law from './law.vue'
import {
  detail,
} from "@/api";
import { catalog_handle,download } from "@/api/configApi";
import "element-ui/lib/theme-chalk/base.css";
import {
  getToken
} from '@/utils/auth'

export default {
  components: {
    power,
    instructions,
    drawings,
    fullText,
    kindred,
    law
  },
  data() {
    return {
      visible: false,
      desc: {
        status: "",
      },
      name: "",
      show: false,
      // type: sessionStorage.getItem("type"),
      token: getToken(),
      pc: 0,
      // pid: ''
      collapseList: [
        {
          name: '摘要',
          URL: '/detail'
        },
        {
          name: '权利说明',
          URL: '/power'
        },
        {
          name: '说明书',
          URL: '/instructions'
        },
        {
          name: '附图',
          URL: '/drawings'
        },
        {
          name: '全文',
          URL: '/fullText'
        },
        {
          name: '同族信息',
          URL: '/kindred'
        },
        {
          name: '法律信息',
          URL: '/law'
        }
      ],
      collapseItem: '摘要',
    };
  },
  props: {
    pid: {
      type: String,
      default: ""
    }
  },
  watch: {
    pid(val) {
      this.descArr(val);
    }
  },
  created() {
    let pc
    if (this.$store.getters.token) {
      pc = 1
    } else {
      pc = 0
    }
  },
  computed: {},
  async mounted() {
  },
  methods: {
    async dow() {
      try {
        download({
          pid: this.pid,
        }).then((res) => {
          if (res.list[0].nginxPath == "The result is empty") {
            this.$message({
              message: "专利文件为空",
              type: "warning",
            });
          } else {
            window.open('https://' + res.list[0].nginxPath, "_blank");
          }
        });
      } catch (e) {
        this.$message(e.message);
      }
    },
    back() {
      this.$emit('back')
      this.collapseItem = '摘要'
    },
    async descArr(pid) {
      // console.log('进入详情页', this.pid)
      let list = await catalog_handle({
        pid: pid,
        lang: 'cn',
        type: 1
      });
      this.desc = list.list;
    },

    async goItemUrl(item,index) {
      this.collapseItem = item.name
      this.desc = null
      let list  = await catalog_handle({ pid: this.pid, lang: 'cn', type: index + 1 });
      this.desc = list.list;
    },
  },
};
</script>


<style lang="less" scoped>
::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
  border: none;
  background: none;
  padding: 0 0 12px 0;
}

::v-deep tbody tr th {
  width: 205px;
  font-size: 14px;
  color: rgba(31, 46, 76, 1) !important;
  margin: 20px 0;
  vertical-align: middle;
}


.detail_info {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  // border-bottom:4px solid #eee;
}

.detail_info_title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  margin: 20px 0;
}

.detail_info_last {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  // margin: 20px 64px;
}

.img-box {
  width: 188px;
  // height:237px;
  border: 1px solid rgba(230, 233, 240, 1);
  border-radius: 5px;
  text-align: center;

  .img {
    width: 133px;
    height: 193px;
    object-fit: cover;
    margin: 10px 0;
  }
}

.detail_info_first_box {
  display: flex;
  align-items: center;
  // margin-bottom: 60px;
}

.tips {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  display: block;
  margin: 10px 0;
}

.detail_head_title {
  width: 143px;
}

.detail_info_patent {
  // height:50px;
  // margin:0 0 22px 0;
  margin-bottom: 20px;
  margin-left: 64px;
  // width: 480px;
}

.detail_head_context {
  width: 143px;
  margin-bottom: 20px;
}

.v_span {
  font-size: 18px;
  font-weight: 400;
  color: rgba(42, 139, 45, 1);
}

.v_span2 {
  font-size: 18px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  padding-left: 20px;
}

.infos {
  margin-top: 37px;
}

.abst__layout-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;

  .abst__layout-label {
    width: 190px;
    margin-right: 20px;
    text-align: left;
    padding-bottom: 15px;
  }

  .abst__layout-text {
    width: 100%;
    text-align: left;
  }
}

.tio {
  line-height: 2.2;
}

.title_pns {
  border-bottom: 1px solid #c8d0dc;
  padding-bottom: 20px;
}

.pc {
  display: block;
}

.mb {
  display: none;
}

.asdsa {
  // margin-top: 0 !important;
}

.main-top {
  margin-top: 0;
}

.main-top {
  padding-top: 60px;
  margin-top: 0;
}

.navbar {
  display: none;
}

.abst__layout-label {
  border-bottom: 1px solid #dbdbdb;
}

.detail_info {
  border-bottom: 4px solid #dbdbdb;
}

.v_span2 {
  display: block;
}

.mb_zy {
  margin-bottom: 10px !important;
}

.Breadcrumbs,
.service {
  display: none;
}

.main-top {
  width: 100%;
  margin-left: 0 !important;
  padding-bottom: 0;
  // padding-top: 60px;
  top: 0;
}

.pc {
  display: none;
}

.mb {
  display: block;
}

.detail_info_title {
  margin: 15px 0;
}

::v-deep tbody tr th {
  margin: 15px 0;
}

.detail_info_last {
  margin: 15px 0;
}

.infos {
  margin: 10px 0 0 0;
}

.detail_info {
  margin-bottom: 30px;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  width: 100%;
}

.detail_info_first_box {
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}

.detail_head_title {
  width: auto;
}

.img-box {
  width: 100%;
}

.abst__layout-row {
  flex-direction: column;
}

.mb_top {
  margin-top: 20px;
}

.top_line {
  border-top: 4px solid #eee;
  padding-top: 20px;
}

.mb_context {
  font-weight: bold;
  margin-bottom: 10px;
  width: 100% !important;
}

.v_span2 {
  padding-left: 0;
}

.tio {
  line-height: 1.3;
}

.icon-tog {
  text-align: center;
  display: inline-block;
  line-height: 46px;
}

::v-deep .icon-toggle {
  font-size: 24px !important;
}

.title_pns {
  border-bottom: 1px solid #c8d0dc;
  padding-bottom: 10px;
}

.transition-box {
  position: fixed;
  right: 0;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.3);
}

.el-zoom-in-top {
  position: fixed;
  width: 80%;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
  top: 0;
  right: 0;
  z-index: 10;
}

.mb_nav_li {
  margin: 60px auto 0;
}

.mb_nav_li li {
  // margin-top:20px;
  padding: 20px 15px;
  border-bottom: 1px solid #ddd;
}

.close {
  float: right;
  // padding: 10px;
  margin-top: 25px;
  margin-right: 25px;

  .iconfont {
    font-size: 22px;
  }

  .mt_btn {
    margin-top: 30px !important;
  }

  .asdsa {
    padding-top: 20px;
  }
}

::v-deep .el-icon-arrow-right {
  display: none;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}

.collapse_item {
  display: flex;
  justify-content: space-between;

  span {
    cursor: pointer;
  }

  .span_active {
    color: #409EFF;
  }
}
</style>
